<template>
  <div class="login">
    <img
      src="@/assets/img/background.jpg"
      alt=""
    >
    <!-- 导航栏 -->
    <van-nav-bar
      class="page-navbar"
      title="注册/登录"
    >
      <van-icon
        slot="left"
        name="cross"
        @click="$router.back()"
      ></van-icon>
    </van-nav-bar>
    <!-- 导航栏 -->
    <van-tabs
      v-model="active"
      color="#fff"
      aria-selected="#fff"
      line-width='33.3%'
      background="transparent"
      title-active-color='#fff'
      title-inactive-color="#ddd"
    >
      <van-tab title="登录">
        <!-- 表单 -->
        <van-field
          v-model="user.userid"
          type="tel"
          maxlength="16"
          placeholder="请输入用户id"
          ref="userid"
        >
          <van-icon
            slot="left-icon"
            class-prefix="icon"
            name="shouji"
          ></van-icon>
        </van-field>
        <van-field
          v-model="user.password"
          type="password"
          maxlength="16"
          placeholder="请输入用户密码"
          ref="password"
        >
          <van-icon
            slot="left-icon"
            class-prefix="icon"
            name="mima"
          ></van-icon>
        </van-field>
        <!-- /表单 -->

        <!-- 登录按钮 -->
        <div class="login-btn-box">
          <van-button
            color="#6db4fb"
            type="info"
            @click="onLogin"
          >登录</van-button>
        </div>
        <!-- /登录按钮 -->
        <van-divider>账号：xinkai 密码：1234546</van-divider>
      </van-tab>
      <van-tab title="注册">
        <!-- 表单 -->
        <van-field
          v-model="user.userid"
          type="tel"
          maxlength="16"
          placeholder="请输入用户id"
          ref="userid"
        >
          <van-icon
            slot="left-icon"
            class-prefix="icon"
            name="shouji"
          ></van-icon>
        </van-field>
        <van-field
          v-model="user.password"
          type="tel"
          maxlength="16"
          placeholder="请输入用户密码"
          ref="password"
        >
          <van-icon
            slot="left-icon"
            class-prefix="icon"
            name="mima"
          ></van-icon>
        </van-field>
        <!-- /表单 -->

        <!-- 登录按钮 -->
        <div class="login-btn-box">
          <van-button
            color="#6db4fb"
            type="info"
            @click="onRegist"
          >注册</van-button>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { login, register } from '@/api/user'
import globalBus from '@/utils/global-bus'

export default {
  name: 'LoginPage',
  components: {},
  props: {},
  data () {
    return {
      user: {
        userid: '',
        password: ''
      },
      isSending: false,
      active: 0
    }
  },
  computed: {},
  watch: {
  },
  created () { },
  methods: {
    async onLogin () {
      if (!this.checkUserId() || !this.checkPassword()) {
        return
      }

      this.$toast.loading({
        duration: 0, // 持续时间，0表示持续展示不停止
        forbidClick: true, // 是否禁止背景点击
        message: '登录中...' // 提示消息
      })
      const { data } = await login(this.user)
      if (data.meta.status === 200) {
        // res.data.data => { token: 'xxx', refresh_token: 'xxx' }
        this.$store.commit('setUser', data.data)
        // 提示 success 或者 fail 的时候，会先把其它的 toast 先清除
        this.$toast.success('登录成功')
        globalBus.$emit('updataRecomment')

        // 跳转到首页
        const redirect = this.$route.query.redirect || '/'
        this.$router.replace(redirect)
      } else {
        this.$toast.fail('登录失败，用户或密码错误')
      }
    },
    async onRegist () {
      if (!this.checkUserId() || !this.checkPassword()) {
        return
      }

      this.$toast.loading({
        duration: 0, // 持续时间，0表示持续展示不停止
        forbidClick: true, // 是否禁止背景点击
        message: '注册中...' // 提示消息
      })
      const { data } = await register(this.user)
      if (data.meta.status === 201) {
        this.$toast.success('注册成功')
      } else {
        this.$toast.fail('注册失败，请重新尝试')
      }
    },
    checkUserId () {
      const { userid } = this.user
      if (!userid) {
        this.$toast({
          message: '用户id不能为空',
          position: 'top'
        })
        this.$refs.userid.focus()
        return false
      }
      if (!/^[a-zA-Z0-9_-]{5,16}$/.test(userid)) {
        this.$toast({
          message: '用户id格式错误',
          position: 'top'
        })
        this.$refs.userid.focus()
        return false
      }
      return true
    },

    checkPassword () {
      const { password } = this.user
      if (!password) {
        this.$toast({
          message: '密码不能为空',
          position: 'top'
        })
        this.$refs.password.focus()
        return false
      }
      if (!/^[a-zA-Z0-9_-]{6,16}$/.test(password)) {
        this.$toast({
          message: '密码格式错误',
          position: 'top'
        })
        this.$refs.password.focus()
        return false
      }
      return true
    }
  }
}
</script>

<style scoped lang="less">
.login {
  height: 100%;
  width: 100%;
  color: #fff;
  img {
    position: fixed;
    top: 0;
    height: 100%;
    width: 100%;
    filter: blur(3px);
  }
  .login-btn-box {
    padding: 20px;
    .van-button {
      width: 100%;
    }
  }
  .van-cell {
    background-color: transparent !important;
    align-items: center;
    ::-webkit-input-placeholder {
      color: #eee;
    }
  }
}
/deep/.van-nav-bar {
  background-color: transparent !important;
}
</style>
